<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>云+-首页</title>
    <link rel="stylesheet" th:href="@{/front/lib/amazeui/assets/css/amazeui.css}"/>
    <link rel="stylesheet" th:href="@{/front/css/hp.css}"/>
    <link rel="stylesheet" th:href="@{/front/js/layui/css/layui.css}">
    <script th:src="@{/front/lib/amazeui/assets/js/jquery.min.js}"></script>
    <script th:src="@{/front/lib/layer/layer.js}"></script>
    <script th:src="@{/front/lib/amazeui/assets/js/amazeui.js}"></script>
    <script th:src="@{/front/lib/amazeui/pagination/amazeui-pagination.js}"></script>
</head>
<body>
<div id="navigate" th:include="/front/navigationBar"></div>
<!--<div class="hp-query-area">
    <div class="am-g" >
        <div class="hp-query-item">
            <ul class="hp-ul-list">
                <li class="li-mark">城市:</li>
                <li class="li-select">不限</li>
                <li class="li-item">
                    <a href="#">北京</a>
                </li>
                <li class="li-item">
                    <a>上海</a>
                </li>
                <li class="li-item">
                    <a>广州</a>
                </li>
                <li class="li-item">
                    <a>杭州</a>
                </li>
                <li class="li-item">
                    <a>武汉</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="am-g">
        <div class="hp-query-item">
            <ul class="hp-ul-list">
                <li class="li-mark">租金:</li>
                <li class="li-select">不限</li>
                <li class="li-item">500以下</li>
                <li class="li-item">500-1000</li>
                <li class="li-item">1000-1500</li>
                <li class="li-item">1500-2000</li>
                <li class="li-item">2000-2500</li>
                <li class="li-item">3000-3500</li>
                <li class="li-item">3500-4000</li>
                <li class="li-item">4000-5000</li>
                <li class="li-item">5000以上</li>
            </ul>
        </div>
    </div>
    <div class="am-g">
        <div class="hp-query-item">
            <ul class="hp-ul-list">
                <li class="li-mark">面积:</li>
                <li class="li-select">不限</li>
                <li>60平米以下</li>
                <li>60-90平</li>
                <li>90-120平</li>
                <li>120-140平</li>
                <li>140-200平</li>
                <li>200-300平</li>
                <li>300平以上</li>
            </ul>
        </div>
    </div>
    <div class="am-g">
        <div class="hp-query-item">
            <ul class="hp-ul-list">
                <li class="li-mark">房型:</li>
                <li class="li-select">不限</li>
                <li>一室</li>
                <li>两室</li>
                <li>三室</li>
                <li>四室</li>
                <li>五室</li>
                <li>五室以上</li>
            </ul>
        </div>
    </div>
    <div class="am-g">
        <div class="hp-query-item">
            <ul class="hp-ul-list">
                <li class="li-mark">方式:</li>
                <li class="li-select">不限</li>
                <li>整租</li>
                <li>合租</li>
            </ul>
        </div>
    </div>
    <div class="am-g">
        <div class="hp-query-item">
            <ul class="hp-ul-list">
                <li class="li-mark" style="margin-top: 5px;">筛选条件:</li>
                <li>
                    <div>
                        <a href="#" class="am-btn am-btn-default">武汉 X</a>
                        <a href="#" class="am-btn am-btn-default">500-1000 X</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>-->
<div class="hp-body-area">
    <div class="am-g">
        <ul class="am-avg-lg-4 am-thumbnails">
            <li th:each="house:${houseList}" class="hp-home-img-item">
                <div class="hp-img">
                    <a th:href="@{/front/find(hid=${house.hid})}">
                        <img class="am-thumbnail"
                             th:src="${#httpServletRequest.getContextPath()}+'/'+${house.img}"/>
                    </a>
                    <div>
                        <div class="hp-fl">
                            <div>
                                <span class="hp-home-title" th:text="${house.title}"></span>
                            </div>
                            <div>
                                <span class="hp-home-type-mark">
                                    [[${house.mode}]]/[[${house.type}]]/[[${house.area}]]m²
                                    <span class="hp-home-price">[[${house.rent}]]元/月</span>
                                </span>
                            </div>
                        </div>
                        <div class="hp-fr hp-am-circle-img">
                            <img th:src="@{/front/img/person_head.jpg}" class="am-circle hp-am-circle"/>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
<!-- 分页位标  区域  -->
<div class="am-g am-cf" id="test">
    <div class="am-container">
        <ul class="am-pagination ">
        </ul>
    </div>
</div>
<!-- 分页位标  区域   end-->


<script th:src="@{/front/js/layui/layui.js}"></script>
<script th:inline="javascript" type="text/javascript">
    let cxtPath = /*[[@{/}]]*/'';
    layui.use('element', function () {
        let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

        //监听导航点击
        element.on('nav(demo)', function (elem) {
            //console.log(elem)
            layer.msg(elem.text());
        });
    });
    layui.use('jquery', function () {
        let $ = layui.jquery
        //添加
        $("#upp").on('click', function () {
                layer.open({
                    type: 2,
                    title: '修改数据',
                    shadeClose: true,
                    shade: false, maxmin: true, //开启最大化最小化按钮
                    area: ['780px', '600px'],
                    content: `${cxtPath}front/one`
                });

            }
        )
    })

   /* let pagination = new Pagination({
    	  wrap: $('.am-pagination'), // 存放分页内容的容器
      count:10,
      limit:10,
      page:true,
    	  current: 1, // 当前的页数（默认为1）
    	  prevText: '上一页', // prev 按钮的文本内容
    	  nextText: '下一页', // next 按钮的文本内容
    	  callback: function(pageNum) { // 每一个页数按钮的回调事件
    		  //ocation.href=''
    		  //alert(pageNum)
    		  layer.msg(pageNum);
    	  }
    })
      layui.use(['laypage', 'layer'], function() {
    	  let laypage = layui.laypage;
          let layer = layui.layer;
    	  //调用分页
    	  //执行一个laypage实例
    	  laypage.render({
    		  limit:10
    		  ,elem: 'test' //注意，这里的 test1 是 ID，不用加 # 号
    		  ,count: 50 //数据总数，从服务端得到
    	  });
      });*/
</script>
</body>

</html>